<template>
	<view class="columnbox content">
		<view class="columnbox top-box wdh-100">
			<view class="rowbox user-info jus">
				<image :src="info.logo" mode="aspectFill" class="user-img"></image>
				<view class="columnbox als">
					<view class="user-name">{{info.nickname}}</view>
					<view class="user-phone">{{info.phone}}</view>
				</view>
			</view>
			<view class="rowbox wdh-100 jus">
				<view class="columnbox user-wallet">
					<view class="user-money">{{info.price}}</view>
					<view>余额（元）</view>
				</view>
				<view class="columnbox user-wallet">
					<view class="user-money">{{info.zhekou}}</view>
					<view>折扣</view>
				</view>
			</view>
		</view>
		<view class="columnbox order-box">
			<view class="recharge_list_item" v-for="(item,index) in list" :key='index'>
				<view class="recharge_list_item_top">
					<view>
						<text v-if="item.state==2">-{{item.price}}</text>
						<text v-else>+{{item.price}}</text>

						<view class="grey-title">{{item.addtime}}</view>
					</view>

					<view class="" style="align-items: flex-end;">
						<view>{{item.title}}</view>
						<!-- <view class="grey-title">管理员</view> -->
					</view>
				</view>

				<view class="recharge_list_item_bottom">
					<text>备注：{{item.beizhu!=''?item.beizhu:'无'}}</text>

				</view>
				<view class="recharge_list_item_bottom">
					<text v-if="item.typ==2">收款来源：微信</text>
					<text v-if="item.typ==3">收款来源：支付宝</text>
					<text v-if="item.typ==4">收款来源：现金</text>
					<text v-if="item.typ==5">收款来源：其他</text>
				</view>
			</view>

		</view>
		<view class="rowbox wdh-100 bottom-box">
			<view class="rowbox" @click="toDeduction">代扣款</view>
			<view class="rowbox" @click="toRecharge">代充值</view>
		</view>

		<!-- 代充值 -->
		<u-popup :show='rechargeflag' mode="center" round="20rpx">
			<view class="columnbox deduction-box">
				<view class="deduction-title">会员充值</view>
				<scroll-view scroll-y style="max-height: 50vh;">
					<view class="rowbox wdh-100 spb deduction-num">
						实收金额：<input type="digit" v-model="rechargePrice" placeholder="请输入金额" />
					</view>
					<view class="pay-title">充值方案</view>
					<scroll-view scroll-y class="recharge-info" v-if='rechargelist.length>=1'>
						<view v-for="(item,index) in rechargelist" :key='index' class="rowbox one-recharge spb"
							:class="{'sel-recharge':currecharge==index}" @click="currecharge=index">
							<view class="columnbox als">
								<view class="wallet-pay-title">充{{item.price}}送{{item.song}}</view>
								<view class="wallet-pay-num">{{item.name}}</view>
							</view>
							<image v-if="currecharge==index" src="/static/img/sel.png" mode="widthFix" class="sel-icon">
							</image>
							<image v-else src="/static/img/unsel.png" mode="widthFix" class="sel-icon"></image>
						</view>

					</scroll-view>
					<view class="addTaocan" v-if='rechargelist.length<1' @click="addTaocan">
						<u-icon name="plus" size="32" color="#a6a6a6"></u-icon>
						<text>添加套餐</text>
					</view>
					<view class="pay-title">实际到账</view>
					<view class="rowbox wdh-100 wallet-pay-box spb" style="width: 98%;margin-left: 1%;">
						<view class="columnbox als">
							<view class="rowbox">
								<view class="wallet-pay-title">
									实际到账金额：<text>¥{{rechargePrice>=rechargelist[currecharge].price?rechargePrice*1 + rechargelist[currecharge].song*1:rechargePrice}}</text>
								</view>
							</view>
							<view class="wallet-pay-num">
								（含赠送金额：{{rechargePrice>=rechargelist[currecharge].price?rechargelist[currecharge].song:0}}元）
							</view>
						</view>
					</view>
					<view class="pay-title">收款来源</view>

					<view @click="paytype=item.value" v-for="(item,index) in payList" :key='index'
						class="rowbox wdh-100 spb one-pay-type">
						<view>{{item.title}}</view>
						<image v-if="paytype==item.value" src="/static/img/sel.png" mode="widthFix" class="sel-icon">
						</image>
						<image v-else src="/static/img/unsel.png" mode="widthFix" class="sel-icon"></image>
					</view>
					<view @click="paytype='5'" class="rowbox wdh-100 spb one-pay-type">
						<view>其他</view>
						<image v-if="paytype=='5'" src="/static/img/sel.png" mode="widthFix" class="sel-icon">
						</image>
						<image v-else src="/static/img/unsel.png" mode="widthFix" class="sel-icon"></image>
					</view>
					<view class="pay-title">备注</view>
					<textarea v-model="beizhu" auto-height placeholder="请输入备注内容" class="beizhu-box"></textarea>
				</scroll-view>
				<view class="rowbox wdh-100 deduction-btn">
					<view class="rowbox" @click="cancelRecharge">取消</view>
					<view class="rowbox def-bgcol" @click="confirmRecharge">确定</view>
				</view>
			</view>
		</u-popup>




		<!-- 代扣款 -->
		<u-popup :show='deductionflag' mode="center" round="20rpx">
			<view class="columnbox deduction-box">
				<view class="deduction-title">会员买单</view>
				
				<view class="rowbox wdh-100 spb deduction-num">
					消费总金额：<input @blur="priceChange" type="digit" @input='koukuan_inpput' v-model="input_price"
						placeholder="请输入金额" />
				</view>
				
				
				<view class="rowbox wdh-100 spb deduction-num" @click="chooseCoupon">
					优惠券：<view class="rowbox">{{curcoupon.name||'请选择'}} <u-icon name="arrow-right"></u-icon> </view>
				</view>
				<view class="pay-title">余额支付</view>

				<view class="rowbox wdh-100 wallet-pay-box spb" @click="paytype='1'">
					<view class="columnbox als">
						<view class="rowbox">
							
							<!-- 最终支付价格 -->
							<!-- <view class="wallet-pay-title" v-if="zhekou==''">
								余额支付实付：<text>¥{{curcoupon==''? deductionNum:deductionNum - curcoupon.price}}</text>
							</view>
							<view class="wallet-pay-title" v-if="zhekou!=''">
								余额支付实付：<text>¥{{(curcoupon==''? deductionNum:deductionNum - curcoupon.price)*zhekou}}</text>
							</view> -->
							<view class="wallet-pay-title">
								余额支付实付：<text>{{finalPrice}}</text>
							</view>
						</view>
						<view class="wallet-pay-num">（余额：{{info.price}}）</view>
					</view>
					<image v-if="paytype=='1'" src="/static/img/sel.png" mode="widthFix" class="sel-icon"></image>

					<image v-else src="/static/img/unsel.png" mode="widthFix" class="sel-icon"></image>

				</view>
				<view class="pay-title" style="border: none;margin-top: 0;">其他收款来源</view>

				<view @click="paytype=item.value" v-for="(item,index) in payList" :key='index'
					class="rowbox wdh-100 spb one-pay-type">
					<view>{{item.title}}</view>
					<image v-if="paytype==item.value" src="/static/img/sel.png" mode="widthFix" class="sel-icon">
					</image>
					<image v-else src="/static/img/unsel.png" mode="widthFix" class="sel-icon"></image>
				</view>
				<view class="rowbox wdh-100 deduction-btn">
					<view class="rowbox" @click="deductionNum='',deductionflag=false">取消</view>
					<view class="rowbox def-bgcol" @click="confirmDeduction">确定</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import getdate from '@/utils/time.js'
	import formatNumber from '@/utils/formatNumber.js'
	export default {
		data() {
			return {
				curcoupon: '',
				couponflag: false,
				deductionNum: '',
				deductionflag: false,
				rechargeflag: false,
				id: 0,
				info: null,
				pageNo: 1,
				list: [],
				total: 0,
				rechargelist: [],
				currecharge: 0,
				submitflag: false,
				paytype: '1',
				payList: [{
						title: '微信',
						value: '2'
					},
					{
						title: '支付宝',
						value: '3'
					},
					{
						title: '现金',
						value: '4'
					}
				],
				rechargePrice: '',
				beizhu: '',
				refreshflag: false,
				zhekou: '',
				input_price:'',
				finalPrice: ''
			};
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.pageNo++
				this.getList()
			}
		},
		onShow() {
			if (this.curcoupon != '') {
				if (this.input_price != '' && this.input_price < this.curcoupon.fullprice) {
					this.curcoupon = ''
					uni.showToast({
						title: '当前优惠券不符合使用条件',
						icon: 'none'
					})
				}  else {
					this.finalPrice =parseFloat((this.input_price - this.curcoupon.price)*this.zhekou).toFixed(2)
				}
				console.log('xxxxxxxxxxxx,',this.curcoupon)
			}
			if (this.refreshflag) {
				this.refreshflag = false

				this.getList();
				this.getDetail()
				this.getInfo()
			}
		},
		onLoad(options) {
			this.id = parseInt(options.id)
			this.getDetail()
			this.getInfo();

		},
		methods: {
			koukuan_inpput(value) {
				// this.deductionNum =parseFloat(value.detail.value);
				
				let val = value.detail.value;
				let money  =  '';
				if(this.zhekou!='' && this.curcoupon=='') {
					this.finalPrice =parseFloat(val*this.zhekou)
				} else if(this.zhekou!='' && this.curcoupon!='') {
					this.finalPrice =parseFloat((input_val-this.curcoupon.price)*this.zhekou)
				} else {
					this.finalPrice = input_val
				}
 				

			},
			priceChange() {
				// if (this.curcoupon != '') {
				// 	if (this.deductionNum != '' && this.deductionNum < this.curcoupon.fullprice) {
				// 		this.curcoupon = ''
				// 		uni.showToast({
				// 			title: '当前优惠券不符合使用条件',
				// 			icon: 'none'
				// 		})
				// 	}
				// }
			},
			chooseCoupon() {
				this.couponflag = true
				uni.navigateTo({
					url: './usercoupon?shanghuid=' + uni.getStorageSync('userInfo').shanghuid + '&uid=' + this.info
						.uid
				})
			},
			confirmDeduction() {
				if (this.finalPrice == ''  || this.finalPrice == 0) {
					uni.showToast({
						title: '请输入扣款金额',
						icon: 'none'
					})
				} else {
					if (this.finalPrice != '' && this.finalPrice < this.curcoupon.fullprice) {
						this.curcoupon = ''
						uni.showToast({
							title: '当前优惠券不符合使用条件',
							icon: 'none'
						})
						return
					}
					
					if (!this.submitflag) {
						this.submitflag = true
						uni.showLoading({
							title: '加载中'
						})
						this.$req.post('/shanghu/daikoufei', {
							uid: this.info.uid,
							shanghuid: uni.getStorageSync('userInfo').shanghuid,
							price: parseFloat(this.finalPrice),
							couponid: this.curcoupon ? parseInt(this.curcoupon.couponid) : 0,
							state: parseInt(this.paytype)
						}).then(res => {
							this.submitflag = false
							this.deductionNum = ''
							this.deductionflag = false
							uni.hideLoading()
							if (res.data.code == 0) {
								uni.showToast({
									title: '扣款成功'
								})
								this.list = []
								this.pageNo = 1
								this.getDetail()
							} else {
								uni.showModal({
									title: '扣款失败',
									content: res.data.msg
								})
							}

						})
					}
				}
			},
			// 代扣款
			toDeduction() {
				this.deductionflag = true
				this.curcoupon = ''
				this.finalPrice = '';
				this.input_price = '';
				this.paytype = '1'
			},
			confirmRecharge() {
				if (this.rechargePrice == '' || this.rechargePrice.trim() == '' || this.rechargePrice == 0) {
					uni.showToast({
						title: '请输入充值金额',
						icon: 'none'
					})
					return
				}
				if (this.rechargelist.length <= 0) {
					uni.showToast({
						title: '请选择充值套餐',
						icon: 'none'
					})
					return
				}
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({

					})
					this.$req.post('/shanghu/chongzhi', {
						uid: this.info.uid,
						shanghuid: uni.getStorageSync('userInfo').shanghuid,
						blockpackageid: this.rechargelist[this.currecharge].id,
						state: parseInt(this.paytype),
						price: parseFloat(this.rechargePrice),
						beizhu: this.beizhu
					}).then(res => {
						this.submitflag = false
						uni.hideLoading()
						this.cancelRecharge()
						if (res.data.code == 0) {
							uni.showToast({
								title: '充值成功'
							})
							this.list = []
							this.pageNo = 1
							this.getDetail()
						} else {
							uni.showModal({
								title: '充值失败',
								content: res.data.msg
							})
						}
						uni.showToast({
							title: '充值成功'
						})
					})
				}
			},
			cancelRecharge() {
				this.currecharge = 0
				this.rechargeflag = false
				this.paytype = '2'
				this.rechargePrice = ''
				this.currecharge = 0
				this.beizhu = ''
			},
			getInfo() {
				this.$req.post('/shanghu/blocks', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid
				}).then(res => {
					this.rechargelist = res.data.data
				})
			},
			toRecharge() {
				this.rechargeflag = true;
				this.paytype = '2'
			},
			getDetail() {
				this.$req.post('/shanghu/walletinfo', {
					id: this.id
				}).then(res => {
					this.info = res.data.data;
					if (res.data.data.zhekou != '') {
						this.zhekou = parseFloat((res.data.data.zhekou) / 100)
					}
					this.getList()
				})
			},
			getList() {
				this.$req.post('/shanghu/userprice', {
					uid: this.info.uid,
					shanghuid: this.info.shanghuid,
					pageNo: this.pageNo,
					pageSize: 20
				}).then(res => {

					res.data.data.data.forEach(resp => {
						resp.addtime = getdate.toLocalDate(resp.addtime)
					})
					this.list = this.list.concat(res.data.data.data)
					this.total = res.data.data.totalCount
				})
			},
			addTaocan(val) {
				uni.navigateTo({
					url: '/pages/recharge/add?flag=' + 'vip'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		justify-content: flex-start;
		background: #f6f6f6;
	}

	.top-box {
		background: #fff;
		padding: 20rpx 20rpx;
	}

	.user-info {
		background: #21282e;
		width: 100%;
		padding: 32rpx 32rpx;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.user-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.user-name {
		color: #c1ac75;
		font-size: 36rpx;
	}

	.user-phone {
		color: #c1ac75;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.user-wallet {
		width: 200rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		border-right: #f6f6f6 solid 1px;
	}

	.user-money {
		color: #c3b07c;
		font-size: 32rpx;
	}

	.order-box {
		margin-top: 20rpx;
		width: 710rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.one-order {
		padding: 20rpx 32rpx;
		font-size: 32rpx;
		color: #21282e;
	}

	.grey-title {
		font-size: 28rpx;
		color: #aaacb5;
		margin-top: 10rpx;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 20rpx 20rpx;
		padding-bottom: 40rpx;
		justify-content: space-around;
	}

	.bottom-box>view:nth-child(1) {
		border: #57bd6a solid 1px;
		color: #57bd6a;
		width: 300rpx;
		height: 90rpx;
		border-radius: 10rpx;
	}

	.bottom-box>view:nth-child(2) {
		background: #57bd6a;
		color: #fff;
		width: 300rpx;
		height: 90rpx;
		border-radius: 10rpx;
	}

	.recharge-box {
		width: 700rpx;
	}

	.recharge-title {
		font-size: 32rpx;
		padding: 20rpx 0;
	}

	.recharge-info {
		width: 100%;
		height: 300rpx;
		margin-top: 20rpx;
	}

	.one-recharge {
		box-shadow: 0 0 4px 2px #eff2f6;
		padding: 20rpx 32rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		width: 98%;
		margin-left: 1%;
	}

	.sel-recharge {}

	.recharge-btn {
		margin-top: 20rpx;
		padding: 0 40rpx;
	}

	.recharge-btn>view:nth-child(1) {
		width: 250rpx;
		border: #bab9bb solid 1px;
		border-radius: 10rpx;
		height: 70rpx;
	}

	.recharge-btn>view:nth-child(2) {
		width: 250rpx;
		color: #fff;
		background: #57bd6a;
		border-radius: 10rpx;
		height: 70rpx;
	}

	.deduction-box {
		width: 600rpx;
		padding: 32rpx 32rpx;

		.deduction-title {
			font-size: 28rpx;
			color: #000;
			font-weight: bold;
			width: 100%;
			border-bottom: #e9eaed solid 1px;
			padding-bottom: 32rpx;
		}

		.deduction-num {
			font-size: 28rpx;
			margin-top: 40rpx;

			input {
				width: calc(100% - 250rpx);
				height: 70rpx;
				padding: 0 20rpx;
				background: #F5F7F9;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}

		.deduction-btn {
			margin-top: 40rpx;
			justify-content: space-between;

			view {
				height: 90rpx;
				// margin: 0 70rpx;
				border-radius: 10rpx;
				width: 240rpx;
			}
		}

		.deduction-btn>view:nth-child(1) {
			border: #d0d3d6 solid 1px;
			color: #5a5c60;
		}

		.deduction-btn>view:nth-child(2) {
			color: #fff;
		}
	}

	.pay-title {
		font-weight: bold;
		font-size: 26rpx;
		color: #202020;
		width: 100%;
		margin-top: 20rpx;
		border-top: #F5F7F9 solid 10rpx;
		padding-top: 20rpx;
	}

	.wallet-pay-box {
		box-shadow: 0 0 4px 2px #eff2f6;
		padding: 20rpx 32rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.wallet-pay-title {
		font-size: 26rpx;
		color: #202020;

		text {
			color: #da3f2d;
		}
	}

	.wallet-pay-num {
		font-size: 24rpx;
		color: #939BA7;
		margin-top: 10rpx;
	}

	.sel-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.one-pay-type {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #202020;
	}

	.beizhu-box {
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx;
		background: #F5F7F9;
		border-radius: 10rpx;
		font-size: 28rpx;
		margin: 20rpx 0;
		line-height: 70rpx;
	}

	.recharge_list_item {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: space-between;
		padding: 20rpx 40rpx;
	}

	.recharge_list_item_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.recharge_list_item_bottom {
		color: #a6a6a6;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.addTaocan {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
	}

	.addTaocan text:nth-child(2) {
		font-size: 24rpx;
		color: #a6a6a6;
		margin-top: 30rpx;
	}
</style>